<template>
  <div class="home-container">
    <!--<Sidebar /> 普通的左边栏-->
    <!-- <SidebarDiv />-->
    <!--左边导航栏-->
    <!--<SidebarTree /> -->
    <SidebarMenu />
    <!--主页面-->
    <main class="main-content">
      <!-- 这里会显示当前路由对应的组件 <router-view /> -->
      <div class="header">
        <!-- 这里可以放置头部内容 -->
        <span style="font-size: 0.9em">{{ currentTime }}</span>
        <div class="header-system">MES-制造执行系统</div>
        <div>Version: 1.0.0</div>
        <div class="admin-info">
          <span class="admin-name">ZS01988</span>
          <span class="admin-role">超级管理员</span>
        </div>
        <div></div>
        <div></div>
      </div>
      <!-- 页面标签栏 -->
      <div class="page-tabs">
        <div
          v-for="page in openPages"
          :key="page.path"
          class="page-tab"
          :class="{ active: route.path === page.path }"
          @click="switchPage(page.path)"
        >
          <span>{{ page.name }}</span>
          <el-button link @click.stop="closePage(page.path)" style="color: #42b983"
            >×</el-button
          >
        </div>
      </div>
      <div class="content">
        <router-view />
      </div>
      <div class="footer">
        <!-- 这里可以放置页脚内容 -->
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import SidebarMenu from '../components/SidebarMenu.vue' // 使用命名导入
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
//useRoute：用于获取当前路由信息，包括路径、参数、查询等
// useRouter：用于编程式导航，如跳转页面、前进后退等操作
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
// 定义时间变量
const currentTime = ref('')

// 更新时间函数
const updateTime = () => {
  const now = new Date()
  const options: Intl.DateTimeFormatOptions = {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    weekday: 'short',
  }
  currentTime.value = now.toLocaleString('zh-CN', options)
}
// 组件挂载时启动定时器
onMounted(() => {
  updateTime()
  const timer = setInterval(updateTime, 1000)
  onBeforeUnmount(() => clearInterval(timer))
})

interface PageInfo {
  name: string
  path: string
}

const route = useRoute()
const openPages = ref<PageInfo[]>([])

// 监听路由变化
// 修改watch路由变化的逻辑
watch(
  () => route.path,
  (newPath) => {
    // 如果路由不存在，则添加到openPages
    const pageName = String(route.meta.title || route.name || '未命名页面')
    const pageExists = openPages.value.some((page) => page.path === newPath)

    // 如果页面不存在，则添加到openPages
    if (!pageExists) {
      openPages.value.push({ name: pageName, path: newPath })
    }
  },
  { immediate: true }
)

// 关闭页面
const closePage = (path: string) => {
  const index = openPages.value.findIndex((page) => page.path === path)
  if (index !== -1) {
    // 如果关闭的是当前页面
    if (route.path === path) {
      // 如果有其他页面，跳转到第一个页面
      if (openPages.value.length > 1) {
        const newPath = openPages.value[index === 0 ? 1 : index - 1].path
        router.push(newPath)
      } else {
        // 如果没有其他页面，跳转到首页
        router.push('/')
      }
    }
    openPages.value.splice(index, 1)
  }
}

// 添加切换页面函数
const switchPage = (path: string) => {
  if (route.path !== path) {
    router.push(path)
  }
}
</script>

<style scoped>
.home-container {
  display: flex;
  width: 100%; /* 新增：设置宽度为视口宽度 */
  height: 100vh; /* 新增：设置高度为视口高度 */
  /* overflow: hidden; 隐藏溢出部分 */
  text-align: left; /* 或其他需要的对齐方式 */
  margin: 0;
  padding: 0;
}

.main-content {
  flex: 1; /* 占据父容器剩余空间 */
  padding: 20px; /* 可选：添加内边距 */
  background-color: #f0f0f0; /* 可选：设置背景颜色 */
  margin-left: 0px; /* 修改为与Sidebar宽度一致 */
  display: flex; /* 启用Flexbox布局 */
  flex-direction: column; /* 子元素垂直排列 */
  height: 100vh; /* 高度设置为视口高度的100% */
  width: calc(100vw - 250px); /* 新增：计算宽度，减去Sidebar宽度 */
}

.header {
  background: #fff;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-system {
  font-size: 1.5rem; /* 使用rem单位，1.5rem约等于24px */
  font-weight: bold; /* 可选：加粗字体 */
}
.admin-name {
  margin-right: 10px; /* 添加右边距 */
}
.content {
  flex: 1;
  padding: 20px;
  background: #f9fbfc;
  overflow: auto;
  min-height: 0;
  /* 移除或调整以下两行 */
  /* display: flex; */
  /* flex-direction: column; */
}

/* 为 router-view 添加样式 */
.content > router-view {
  width: 100%;
  height: 100%;
}

.footer {
  padding: 15px;
  text-align: center;
  background: #fff;
  border-top: 1px solid #eee;
}
.page-tabs {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: #fff;
  border-bottom: 1px solid #ebeef5;
}

.page-tab {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  cursor: pointer;
}

.page-tab.active {
  background-color: #f5f7fa;
  border-color: #409eff;
}

.page-tab .el-button {
  margin-left: 8px;
  padding: 0;
  font-size: 12px;
  color: #42b983 !important; /* 添加 !important 提高优先级 */
}
</style>
